<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script !src="">
  // window.addEventListener('load',function (){
  //   console.log('页面加载完毕')
  //   // 把执行函数放在里面才能找到dom元素点，不然就会报错
  //   // --
  //   const btn= document.querySelector('button')
  //   btn.addEventListener('click',function (){
  //     console.log('btn事件')
  //   })
  //   // ---
  // })

  // document 有一个 DOMContentLoaded 事件
  // 作用: 等待网页中的 DOM 结构加载完成后就会立即执行 (不会去等待图片/视频/音频等资源的加载)
  // WebAPIs 阶段最重要的学习方法不是背下每一个知识点, 而是学会查文档
document.addEventListener('DOMContentLoaded',function (){
  console.log('加载了')
  const btn = document.querySelector('button')
  btn.addEventListener('click', function() {
    alert('嘿嘿嘿')
  })
})
</script>
<body>
<button>点击我</button>
</body>
</html>
<script !src="">
  // 页面加载事件
  // window 有一个 load 事件
  // 作用: 等待网页中所有的资源加载完成后执行 (页面结构/图片/音频/视频等等所有资源)

</script>